<template>
  <div class="admin-layout">
    <el-container style="height: 100vh">
      <!-- 侧边菜单 -->
      <el-aside width="220px" class="aside">
        <div class="logo-container">
          <h2 class="logo">管理系统</h2>
        </div>
        <el-menu
          router
          :default-active="activeMenu"
          class="el-menu-vertical"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/admin/dashboard">
            <el-icon><Odometer /></el-icon>
            <template #title>控制台</template>
          </el-menu-item>
          <el-menu-item index="/admin/posts">
            <el-icon><Document /></el-icon>
            <template #title>帖子管理</template>
          </el-menu-item>
          <el-menu-item index="/admin/comments">
            <el-icon><ChatDotRound /></el-icon>
            <template #title>评论管理</template>
          </el-menu-item>
          <el-menu-item index="/admin/users">
            <el-icon><User /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
          <el-menu-item index="/admin/blacklist">
            <el-icon><RemoveFilled /></el-icon>
            <template #title>已封禁用户</template>
          </el-menu-item>
          <el-menu-item index="/admin/review">
            <el-icon><Checked /></el-icon>
            <template #title>内容审核</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 内容区域 -->
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="header">
          <div class="header-left">
            <el-icon class="fold-icon" @click="toggleCollapse"><Fold /></el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="user-dropdown">
                管理员 <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 主要内容区域 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<!--<script setup>-->
<!--import { ref, computed } from 'vue'-->
<!--import { useRouter, useRoute } from 'vue-router'-->
<!--import { ElMessageBox } from 'element-plus'-->

<!--const route = useRoute()-->
<!--const router = useRouter()-->
<!--const isCollapse = ref(false)-->

<!--// 当前菜单激活项-->
<!--const activeMenu = computed(() => route.path)-->

<!--// 当前页面标题-->
<!--const currentPageTitle = computed(() => {-->
<!--  switch (route.path) {-->
<!--    case '/admin/dashboard':-->
<!--      return '控制台'-->
<!--    case '/admin/posts':-->
<!--      return '帖子管理'-->
<!--    case '/admin/comments':-->
<!--      return '评论管理'-->
<!--    case '/admin/users':-->
<!--      return '用户管理'-->
<!--    case '/admin/blacklist':-->
<!--      return '已封禁用户'-->
<!--    case '/admin/review':-->
<!--      return '内容审核'-->
<!--    default:-->
<!--      return '控制台'-->
<!--  }-->
<!--})-->

<!--// 折叠侧边栏-->
<!--const toggleCollapse = () => {-->
<!--  isCollapse.value = !isCollapse.value-->
<!--}-->

<!--// 处理下拉菜单命令-->
<!--const handleCommand = (command) => {-->
<!--  if (command === 'logout') {-->
<!--    ElMessageBox.confirm('确定要退出登录吗?', '提示', {-->
<!--      confirmButtonText: '确定',-->
<!--      cancelButtonText: '取消',-->
<!--      type: 'warning'-->
<!--    }).then(() => {-->
<!--      localStorage.removeItem('adminToken')-->
<!--      router.push('/admin/login')-->
<!--    }).catch(() => {})-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped>
.admin-layout {
  height: 100%;
}

/* 侧边菜单样式 */
.aside {
  background-color: #304156;
  overflow-x: hidden;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3649;
}

.logo {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.el-menu-vertical {
  border-right: none;
}

/* 顶部导航栏样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.header-left {
  display: flex;
  align-items: center;
}

.fold-icon {
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

/* 主内容区域样式 */
.main-content {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
}
</style> 